<template>
  <div>
    <div class="detail-header">
      {{projectDetail.name}}
    </div>
    <div class="nav-header">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card shadow="always">
            <i class="el-icon-wind-power"></i>
            <span>边坡总数:</span>
            <span>{{countPoint.workPointNum}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <i class="el-icon-s-marketing"></i>
            <span>监测点总数:</span>
            <span>{{countPoint.monitorNum}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <i class="el-icon-bangzhu"></i>
            <span>设备在线:</span>
            <span>{{onLinelist.onlineCount}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <i class="el-icon-bangzhu"></i>
            <span> 设备离线:</span>
            <span>{{onLinelist.offlineCount}}</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 表格部分 -->
    <div class="page">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="grid-content">
            <collapse-wrap title="最新数据">
              <!-- table -->
              <div class="page_main">
                <el-table :data="tableList" border height="800" @row-click="clickData">
                  <el-table-column label="序号" fixed width="80">
                    <template slot-scope="scope">
                      {{getIndex(scope.$index)}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="workPointName" show-overflow-tooltip label="边坡名称" min-width="250">
                  </el-table-column>
                  <el-table-column prop="pointName" show-overflow-tooltip label="监测点" min-width="180">
                  </el-table-column>
                  <el-table-column prop="monitorTypeName" show-overflow-tooltip label="监测类型" width="120">
                  </el-table-column>
                  <el-table-column prop="createTime" label="数据采集时间" width="200">
                    <template slot-scope="scope">
                      {{scope.row.createTime|formatTimer()}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="recordValueName" show-overflow-tooltip label="数据" min-width="200">
                  </el-table-column>
                  <el-table-column prop="warningLevelName" label="预警等级" width="120">
                    <template slot-scope="scope">
                      <el-button size="mini" :style="scope.row.warningLevelName | gradeColor" class="s-white">
                        {{scope.row.warningLevelName}}
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </collapse-wrap>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content s-grade">
            <collapse-wrap title="预警等级">
              -
              <el-card
              @click.native="toWorkPoint(item.warningLevel)"
                class="grade-card card-concent"
                shadow="always"
                v-for="item in countWarn"
                :key="item.warningLevel"
                :style="item.warningLevelName | gradeColor">
                <i class="el-icon-s-operation"> </i>
                <i class="grade-word">{{ item.warningLevelName }}</i>
                <div class="grade-box">
                  <p>
                    <span>数量：</span><span>{{ item.num }}</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    class="s-progress"
                    :percentage="item.percent"></el-progress>
                  <p>
                    <span>占比：</span><span>{{ item.percent }}%</span>
                  </p>
                </div>
              </el-card>
            </collapse-wrap>
          </div>
          <div class="s-pie">
            <el-row :gutter="10">

              <div class="grid-content">
                <collapse-wrap title="监测点占比图">
                  <div class="s-pie">
                    <pie-charts ref="monitorPie"></pie-charts>
                  </div>
                </collapse-wrap>
              </div>
            </el-row>
          </div>

        </el-col>
      </el-row>
    </div>
    <!-- 饼图部分 -->

  </div>
</template>
<script>
  import PieCharts from './pie-charts/pie-charts.vue'
  import CollapseWrap from '@/components/collapse-wrap'
  import Format from '@/utils/format'
  import {
    monitorChart,
    deviceOnlineStatus,
    queryRecentList,
    countPointList,
    countWarnList
  } from '@/services/model/project-info.js'
  import {actions, store} from './work-point.store'

  export default {
    data() {
      return {
        ws: '',
        onLinelist: '',
        countPoint: '',
        form: {
          page: 1,
          pageSize: 20
        },
        pageSize: 20,
        tableList: [],
        countWarn: [],
      }
    },
    components: {
      CollapseWrap,
      PieCharts
    },

    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
      gradeColor(val) {
        switch (val) {
          case "正常":
            return "background-color:#0DC26B !important";
          case "I级预警":
            return "background-color:#0073b7 !important";
          case "II级预警":
            return "background-color:#f39c12 !important";
          case "III级预警":
            return "background-color:#ff851b !important";
          case "IV级预警":
            return "background-color:#e43321 !important";
          default:
            return "background-color:#0DC26B !important";
        }

      }
    },
    computed: {
      newDatas() {
        return this.$store.state.newDataList
      },
      projectDetail() {
        return store.projectInfo
      }
    },

    watch: {
      newDatas(val) {
        if (val.data.projectId === this.$route.params.projectId) {
          if (val.type === 1) { // 非预警
            this.tableList.unshift(val.data)
          }
        }
      }
    },
    methods: {
      toWorkPoint(warningLevel) {
        let arr=this.$route.path.split('/')
        let projectId=arr[2]

        this.$router.push({
          path: `/project/${projectId}/work-point/`,
          query: {warningLevel: warningLevel}
        })
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 最新数据行点击
      clickData(row) {

        this.$router.push({
          path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`
        })
      },
      // 监测点占比
      async monitorChartList(val) {
        let res = await monitorChart(val)
        let list = res.data ? res.data : []
        this.$refs.monitorPie.updateEchart(list, 1)
      },

      // 设备在线离线数
      async deviceOnlineList(val) {
        let res = await deviceOnlineStatus(val)
        this.onLinelist = res.data ? res.data : []
      },
      // 边坡监测点数
      async pointCountList(val) {
        let res = await countPointList(val)
        this.countPoint = res.data ? res.data : []
      },
      // 预警等级占比
      async warnCountList(val) {
        let res = await countWarnList(val)
        let countWarn = res.data ? res.data : []
        let warnAllCount = countWarn.reduce((acc, current) => acc + parseInt(current.num), 0)
        if (warnAllCount === 0) {
          this.countWarn = countWarn.map((item) => {
            return {...item, percent: 0}// 占比
          })
        } else {
          this.countWarn = countWarn.map((item) => {
            return {...item, percent: parseInt(item.num / warnAllCount * 100)}// 占比
          })
        }
      },
      // 最新数据
      async queryList() {
        let reqData = {projectId: this.$route.params.projectId, pageSize: this.form.pageSize}
        let res = await queryRecentList(reqData)
        this.tableList = res.data ? res.data : []
      },
    },
    created() {
      this.queryList()
    },
    mounted() {
      // 预警等级占比
      this.warnCountList({projectId: this.$route.params.projectId})
      // 边坡监测点数
      this.pointCountList({projectId: this.$route.params.projectId})
      // 设备在线离线数
      this.deviceOnlineList({projectId: this.$route.params.projectId})
      // 监测点占比
      this.monitorChartList({projectId: this.$route.params.projectId})
      // 仪器占比
    },
  }
</script>

<style scoped="scoped" lang="less">
  .el-row {
    margin-bottom: 20px;
    color: white !important;
    line-height: 20px;

    /deep/ .title {
      padding: 20px;
    }

    /deep/ .content {
      padding: 10px !important;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .nav-header {
    margin-bottom: 20px;

    /deep/ .el-card {
      color: white !important;
    }

    /deep/ .el-card__body i,
    .el-card__body span {
      display: inline-block;
      vertical-align: middle;
    }

    .el-col span {
      margin-left: 15px;
      font-size: 16px;
    }

    .el-col i {
      font-size: 26px;
    }
  }

  .grade-card {
    color: #FFFFFF;
    margin-bottom: 8px;
    font-size: 13px;

    /deep/ .el-card__body {
      padding: 10px;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      width: 45%;
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      /deep/ .el-progress-bar__outer {
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }

  .page {

    height: 750px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /deep/ .el-table {
    td, th {
      padding: 5px !important;
    }
  }

  .s-pie {
    height: 250px;
  }

  .s-white {
    color: #FFFFFF;
  }

  /deep/ .el-card {
    background: #04a7b3 !important;
  }

  ::-webkit-scrollbar {
    width: 0px;
    height: 02px;

  }
</style>
